<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts'

onMounted(() => {
  //初始化图表
  let box2Item1Echarts = echarts.init(document.getElementById('box2ItemContent1'))

  let option1 = {
    title: {
      text: '交易数据',
      show: false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      right: 0
    },
    grid: {
      left: 30,
      right: 30,
      bottom: 30
    },
    xAxis: {
      data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
    },
    yAxis: [
      {
        name: '金额',
        type: 'value'
      }
    ],
    series: [
      {
        data: [168, 52, 38, 0, 0, 30, 45, 78, 103, 128, 101, 126, 169, 87, 98, 66, 111, 30, 21, 203, 62, 21, 10, 0, 0],
        type: 'line',
        name: '交易金额',
        smooth: true,
        areaStyle: {
        },
      }
    ]
  }
  box2Item1Echarts.setOption(option1)

  let box2Item2Echarts = echarts.init(document.getElementById('box2ItemContent2'))
  let option2 = {
    title: {
      text: '用户访问来源',
      show: false
    },
    legend: {
      right: 10,
      top: 'middle',
      orient: 'vertical'
    },
    tooltip: {
      type: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: [20, 120],
        center: ['40%', '50%'],
        roseType: 'radius',
        label: {
          show: false
        },
        data: [
          { value: 40, name: '搜索引擎' },
          { value: 33, name: '直接访问' },
          { value: 28, name: '邮件营销' },
          { value: 22, name: '联盟广告' },
          { value: 20, name: '视频广告' },
          { value: 15, name: '其他' }
        ]
      }
    ]
  }
  box2Item2Echarts.setOption(option2)
})

const cycleTimeValue = ref(1)

const cycleTimeEnum = ref([
  {name: '昨日', value: 1},
  {name: '近7日', value: 2 },
  {name: '近一个月', value: 3},
  {name: '近三个月', value: 4}
])
</script>

<template>
  <div class="cb-main-container">
    <div class="box-1">
      <div class="box-1-item">
        <div class="box-1-item-left">
          <div>125,12<span class="down">-12.32%</span></div>
          <div class="title">订单统计信息</div>
        </div>
        <div class="box-1-item-right">
          <font-awesome-icon icon="fa-solid fa-user-secret" style="color: #F56C6C" />
        </div>
      </div>
      <div class="box-1-item">
        <div class="box-1-item-left">
          <div>653,33<span class="up">+42.32%</span></div>
          <div class="title">月度计划信息</div>
        </div>
        <div class="box-1-item-right">
          <font-awesome-icon icon="fa-solid fa-user-secret" />
        </div>
      </div>
      <div class="box-1-item">
        <div class="box-1-item-left">
          <div>125,65<span class="up">+17.32%</span></div>
          <div class="title">年度计划信息</div>
        </div>
        <div class="box-1-item-right">
          <font-awesome-icon icon="fa-solid fa-user-secret" />
        </div>
      </div>
      <div class="box-1-item">
        <div class="box-1-item-left">
          <div>520,43<span class="down">-10.01%</span></div>
          <div class="title">访问统计信息</div>
        </div>
        <div class="box-1-item-right">
          <font-awesome-icon icon="fa-solid fa-user-secret" />
        </div>
      </div>
    </div>
    <div class="box-2">
      <div class="box-2-item">
        <div class="title">
          <div>交易数据</div>
          <div>
            <el-select v-model="cycleTimeValue" style="width: 98px" size="small">
              <el-option
                  v-for="(item, index) in cycleTimeEnum"
                  :key="index"
                  :label="item.name"
                  :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="content" id="box2ItemContent1">11</div>
      </div>
      <div class="box-2-item" id="box2Item2">
        <div class="title">
          <div>用户访问来源</div>
        </div>
        <div class="content" id="box2ItemContent2"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cb-main-container {
  width: 100%;
  .box-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    .box-1-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      height: 128px;
      width: calc((100% - 32px)/4);
      box-sizing: border-box;
      @include paddingEffect();
      &:hover {
        @include borderShadowEffect;
      }

      .box-1-item-left {
        font-size: 32px;

        span {
          font-size: 16px;
          padding-left: 6px;

          &.down {
            color: $cb-color-danger;
          }

          &.up {
            color: $cb-color-success;
          }
        }

        .title {
          font-size: 14px;
        }
      }

      .box-1-item-right {
        @include circleBox(68px, 68px);
        @include flexCenterStyle;
        font-size: 21px;
      }
    }

    .box-1-item:nth-child(1) .box-1-item-right {
      background-color: #ECF5FF
    }
    .box-1-item:nth-child(2) .box-1-item-right {
      background-color: #F0F9EB;
    }
    .box-1-item:nth-child(3) .box-1-item-right {
      background-color: #FDF6EC;
    }
    .box-1-item:nth-child(4) .box-1-item-right {
      background-color: #FEF0F0;
    }
  }
  .box-2 {
    margin: 16px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .box-2-item {
      display: flex;
      flex-direction: column;
      height: 360px;
      & {
        @include containerStyleExt1;
      }

      .title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;

        & > :first-of-type {
          font-weight: bold;
          font-size: 14px;

          & {
            @include titleSquareSymbolPrefix(4px, 20px, 8px)
          }
        }
      }

      .content {
        margin-top: 4px;
        flex: 2;
      }
    }

    & > :nth-of-type(1) {
      margin-right: 20px;
      flex: 2;
    }

    & > :nth-of-type(2) {
      flex: 1;
    }
  }
}
</style>
